<template>
  <dv-border-box-8 class="production-panel">
    <div class="panel-header">
      <i class="el-icon-s-operation"></i>
      生产线实时监控
    </div>
    
    <div class="production-content">
      <el-table 
        :data="productionLineData" 
        style="width: 100%"
        :row-class-name="tableRowClassName"
        :cell-class-name="tableCellClassName"
      >
        <el-table-column prop="lineId" label="生产线编号" />
        <el-table-column prop="status" label="状态" :formatter="formatStatus" />
        <el-table-column prop="currentOutput" label="当前产量" />
        <el-table-column prop="targetOutput" label="目标产量" />
        <el-table-column prop="efficiency" label="效率" />
      </el-table>
    </div>
  </dv-border-box-8>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  productionLineData: {
    type: Array,
    required: true
  }
})

// 状态格式化函数
const formatStatus = (row) => {
  switch (row.status) {
    case 'running':
      return '运行中'
    case 'in_progress':
      return '进行中'
    case 'delayed':
      return '延迟'
    default:
      return '停机'
  }
}

// 表格行类名
const tableRowClassName = ({ rowIndex }) => {
  return rowIndex % 2 === 0 ? 'table-row-even' : 'table-row-odd'
}

// 表格单元格类名
const tableCellClassName = ({row, column}) => {
  if (column.property === 'status') {
    if (row.status === 'running') return 'status-success'
    if (row.status === 'delayed') return 'status-danger'
    if (row.status === 'in_progress') return 'status-primary'
  }
  
  if (column.property === 'efficiency') {
    const efficiency = parseInt(row.efficiency)
    if (efficiency >= 70) return 'status-success'
    if (efficiency >= 50) return 'status-warning'
    return 'status-danger'
  }
  
  return ''
}
</script>

<style>
.production-panel .el-table .table-row-even {
  background-color: rgba(24, 44, 78, 0.6) !important;
}

.production-panel .el-table .table-row-odd {
  background-color: rgba(24, 44, 78, 0.3) !important;
}

.production-panel .el-table .status-success {
  color: #67c23a !important;
  font-weight: bold !important;
}

.production-panel .el-table .status-danger {
  color: #f56c6c !important;
  font-weight: bold !important;
}

.production-panel .el-table .status-primary {
  color: #409eff !important;
  font-weight: bold !important;
}

.production-panel .el-table .status-warning {
  color: #e6a23c !important;
  font-weight: bold !important;
}

.production-panel .el-table th {
  background-color: rgba(21, 45, 99, 0.8) !important;
  color: #29b6ff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.production-panel .el-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.production-panel .el-table {
  background-color: transparent !important;
  color: #fff !important;
}

.production-panel .el-table__body tr:hover > td {
  background-color: rgba(41, 182, 255, 0.1) !important;
}
</style>

<style scoped>
.production-panel {
  width: 100%;
  height: 350px;
  position: relative;
  padding: 15px;
}

.panel-header {
  font-size: 16px;
  color: #29b6ff;
  margin-bottom: 15px;
}

.production-content {
  height: calc(100% - 30px);
  display: flex;
  flex-direction: column;
}
</style> 